<template>
  <div class="found-item-view">

    <van-swipe :autoplay="3000" indicator-color="#fff">
      <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
        <img v-lazy="image.res_url[0]" />
      </van-swipe-item>
    </van-swipe>

    <div class="nav">
      <ul>
        <li v-for="(t, index) in topTagLists" :key="index" :class="[!t.image ? 'empty' : '']">
          <div class="cover-layer"></div>
          <img :src="t.image" />
          <div class="name">#{{ t.name }}</div>
          <div class="joined-count">{{ t.joinedCount }}参加</div>
        </li>
      </ul>
      <i></i>
    </div>

    <div class="content">
      <keep-alive>
        <masonry-view :dataArr="dataArr" :switchSelected="switchSelected" />
      </keep-alive>


    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";

let isLoading = ref(false)
//子页
const props = defineProps([
  "dataArr",
  "topTagLists",
  "advertisingData",
  "getNewData",
  "getData",
  "switchSelected"
])
</script>

<style lang="scss" scoped>
.found-item-view {
  width: 100vw;
  min-height: 100vh;
  margin-bottom: 55px;

  .nav {
    min-height: 0px;
    margin: 10px 0;
    padding: 0 10px;
    position: relative;

    ul {
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      align-items: center;

      li {
        width: 95px;
        height: 60px;
        margin: 0 5px;
        border-radius: 15px;
        display: inline-block;
        position: relative;

        .cover-layer {
          width: 100%;
          height: 100%;
          position: absolute;
          bottom: 0px;
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 15px;
          z-index: 49;
        }

        img {
          width: 95px;
          height: 60px;
          object-fit: cover;
          filter: blur(1px);
          border-radius: 15px;
        }

        .name,
        .joined-count {
          color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 50;
        }

        .name {
          font-size: 12px;
          top: 35%;
        }

        .joined-count {
          font-size: 12px;
          top: 65%;
        }
      }

      .empty {
        background-color: #8f8f8f;
      }
    }

    i {
      width: 50vw;
      height: 20px;
      display: block;
      background-image: url("@/assets/images/home/xSU.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 100%;
    height: 100%;
  }

  .content {
    width: 98vw;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 55px;
  }
}
</style>